import {
    Row,
    Col,
    Form,
    Input,
    Select,
    Modal,
} from 'antd';

import AsyncThreeLevelLinkAge from '@/components/GetCascaderByAsyncQuery';
const FormItem = Form.Item;
const { Option } = Select;


//新增表单
let getCascaderData;
const CreateForm = Form.create()(props => {
    const { modalVisible, form, handleAdd, handleModalVisible,geographicData,requestModelName,dispatch } = props;
const okHandle = () => {
    form.validateFields((err, fieldsValue) => {
        if(getCascaderData) {
            fieldsValue.province_code = getCascaderData[0].value;
            fieldsValue.province_name = getCascaderData[0].label;
            fieldsValue.city_code = getCascaderData[1].value;
            fieldsValue.city_name = getCascaderData[1].label;
            fieldsValue.county_code = getCascaderData[2].value;
            fieldsValue.county_name = getCascaderData[2].label;
        }
        if (err) return;
        getCascaderData = "";
        form.resetFields();
        handleAdd(fieldsValue);
});
};

const selectedCascaderValue = (record) => {
    console.log(record);
    getCascaderData = record;
}

const parentCascaderMethod = {
    dispatch,
    geographicData,
    selectedCascaderValue,
    requestModelName,
}

return (
    <Modal
width={800}
height={800}
destroyOnClose
title="新增"
visible={modalVisible}
onOk={okHandle}
onCancel={() => handleModalVisible()}
>
<Form  layout="vertical" hideRequiredMark>

   
    <Row gutter={{ md: 8, lg: 24, xl: 48 }}>



        <Col  md={12} sm={24}>
            <FormItem  label="省/市/县">
                {form.getFieldDecorator('province_code', {
                })(<AsyncThreeLevelLinkAge {...parentCascaderMethod}/>)}
            </FormItem>
        </Col>
        
        
        <Col  md={12} sm={24}>
        <FormItem  label="地址">
            {form.getFieldDecorator('details_address', {
            rules: [{ required: false, message: '请输入至少五个字符的地址！', min: 1 }],
            })(<Input placeholder="请输入" />)}
        </FormItem>
        </Col>




    </Row>


    <Row gutter={{ md: 8, lg: 24, xl: 48 }}>



        <Col md={12} sm={24}>
        <FormItem label="是否默认">
            {form.getFieldDecorator('is_defalut')(
                <Select placeholder="请选择" style={{ width: '100%' }}>
                    <Option value="1">是</Option>
                    <Option value="0">否</Option>
                </Select>
            )}
        </FormItem>
        </Col>
    </Row>



</Form>
</Modal>
);
});

export default CreateForm;



